<template>
	<div>
		<a-dropdown
			v-model="show"
			:trigger="['click']"
			placement="bottomLeft"
			overlayClassName="box-dropdown"
		>
			<div class="box-btn">
				<a-button :class="`btn ${dataType === 'number' ? 'showset' : ''}`">
					<i class="word">{{ item ? item.attrName : '总体' }}</i>
				</a-button>
			</div>

			<template slot="overlay" @click="handleVisible">
				<div class="box-list">
					<a-input-search @search="onSearch" @change="handleChange" placeholder="请输入搜索" />
					<div class="tag">
						<a-tag color="blue" style="maigin-right: 10px">
							<a href="#eventsAttr">事件属性</a>
						</a-tag>
						<a-tag color="blue"><a href="#userAttr">用户属性</a></a-tag>
					</div>
					<div class="box-menu" ref="elementHeight">
						<h3 class="title">事件属性</h3>
						<a-menu @click="changeGroups($event, 'event')">
							<template>
								<a-menu-item
									v-for="o in listData.eventAttrs"
									:role="o.dataType"
									:key="o.attrCode"
									:value="o.attrCode"
									:title="o.attrName"
									:disabled="disabledItem.includes(o.attrCode) ? true : false"
								>
									{{ o.attrName }}
								</a-menu-item>
							</template>
						</a-menu>
						<h3 class="title">用户属性</h3>
						<a-menu @click="changeGroups($event, 'user')">
							<template>
								<a-menu-item
									v-for="o in listData.userAttrs"
									:role="o.dataType"
									:key="o.attrCode"
									:value="o.attrCode"
									:title="o.attrName"
									:disabled="disabledItem.includes(o.attrCode) ? true : false"
								>
									{{ o.attrName }}
								</a-menu-item>
							</template>
						</a-menu>
					</div>
				</div>
			</template>
		</a-dropdown>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'
import request from '@/utils/request'
import _ from 'lodash'

@Component({
	name: 'GroupItem'
})
export default class extends Vue {
	@Prop() dataSource!: any
	@Prop() item!: any
	@Prop() itemKey!: number
	@Prop() sum!: number
	@Prop() disabledItem!: string[]
	@Prop() projectId!: number
	@Prop() eventCode!: string
	@Prop() dataType!: string

	private lists: { name: string; remark: string }[] = []
	private listData: any = {}
	private show = false
	private visible = false

	mounted(): void {
		this.getConditionData()
	}

	private handleVisible() {
		this.show = true
	}

	private onSearch(value: string) {
		let resule: any = { eventAttrs: [], userAttrs: [] }
		if (!_.isEmpty(value)) {
			let searchWord = value?.trim()
			const eventRes = this.listData.eventAttrs.filter((obj: any) => {
				const { attrCode, attrName } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(attrCode) || regExp.test(attrName)
			})
			const userRes = this.listData.userAttrs.filter((obj: any) => {
				const { aggregatorCode, aggregatorAlias } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(aggregatorCode) || regExp.test(aggregatorAlias)
			})
			resule = { eventAttrs: eventRes, userAttrs: userRes }
			this.listData = _.cloneDeep(resule)
		}
	}

	private handleChange(e: any) {
		const { value } = e.target
		if (value === '') {
			this.listData = this.lists
		}
	}

	@Emit('changeGroups')
	private changeGroups(e: any, type: string) {
		return {
			e,
			type: type,
			itemKey: this.itemKey
		}
	}

	@Watch('projectId')
	@Watch('eventCode')
	private getConditionData() {
		request('reportservice/event/filtProperties', {
			method: 'GET',
			data: {
				projectId: this.projectId,
				eventCode: this.eventCode
			}
		}).then(({ data }) => {
			this.lists = data
			this.listData = _.cloneDeep(this.lists)
		})
	}
}
</script>

<style lang="scss" scoped>
.box-btn {
	.set {
		cursor: pointer;
	}
}
.btn {
	float: left;
	// min-width: 90px;
	&.show-set {
		padding: 0px 32px 0px 0px !important;
	}
	i {
		display: inline-block;
		height: 32px !important;
		line-height: 32px !important;
		font-style: inherit !important;
		&.word {
			width: 70px !important;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: center;
		}
	}
}

.box-list {
	width: 312px;
	height: 260px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	background: #fff;

	.tag {
		margin: 10px 0;
		padding: 0 10px;
	}
	.title {
		color: #17233d;
		line-height: 30px;
		font-size: 14px;
		padding-left: 10px;
		display: flex;
		align-items: center;
		&::before {
			display: inline-block;
			content: '';
			height: 12px;
			width: 3px;
			margin-right: 10px;
			background: #2185f0;
		}
		&::after {
			display: inline-block;
			content: '';
			height: 1px;
			flex-grow: 1;
			margin-left: 8px;
			background: #e9f0f7;
		}
	}
	.box-menu {
		height: 180px;
		overflow-y: scroll;
		margin-top: 10px;
		// position: relative;
		.ant-menu {
			// position: absolute;
			.ant-menu-item {
				.check {
					display: none;
				}
				&:hover {
					background: rgba(45, 140, 240, 0.06);
				}
				&.ant-menu-item-selected {
					.check {
						display: inline-block;
						position: absolute;
						top: 12px;
						right: 10px;
					}
				}
			}
		}
	}
}
</style>
